<script setup lang="ts">
  import { computed, ref } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'
  // 导入api接口
  import { getGoodsAPI } from '@/services/goods'
  import { addCartAPI } from '@/services/cart'
  import { getAddressListAPI } from '@/services/address'
  // 导入类型声明文件
  import type { AddressItem } from '@/types/address'
  import type { GoodsResult } from '@/types/goods'
  import type { SkuPopupLocaldata, SkuPopupInstance, SkuPopupEvent } from '@/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup'
  // 导入组件
  import ServicePanel from './components/ServicePanel.vue'
  import AddressPanel from './components/AddressPanel.vue'
  // 导入持久化数据库
  import { useAddressStore, useMemberStore } from '@/stores/index'
  const addressStore = useAddressStore()
  const memberStore = useMemberStore()

  // 收获地址数据
  const addressListData = ref<AddressItem[]>([])
  // 获取收获地址
  const getAddressList = async () => {
    if (!memberStore.profile?.token) {
      return
    }
    const { result } = await getAddressListAPI()
    addressListData.value = result
  }


  // 获取屏幕边界到安全区域距离
  const { safeAreaInsets } = uni.getSystemInfoSync()

  // 获取请求参数
  const query = defineProps<{
    id : string
  }>()

  // 获取商品详情方法
  const goodsData = ref<GoodsResult>()
  const getGoods = async () => {
    const { result } = await getGoodsAPI(query)
    goodsData.value = result
    localdata.value = {
      _id: result.id,
      name: result.name,
      goods_thumb: result.mainPictures[0],
      spec_list: result.specs.map(item => {
        return {
          name: item.name,
          list: item.values
        }
      }),
      sku_list: result.skus.map(item => {
        return {
          _id: item.id,
          goods_id: result.id,
          goods_name: result.name,
          image: item.picture,
          price: item.price * 100,
          stock: item.inventory,
          sku_name_arr: item.specs.map(itemitem => itemitem.valueName)
        }
      })
    }
  }

  // 轮播图切换
  const swiperCurrent = ref(1)
  // 这里使用uniapp中的事件类型
  const onSwiperChange : UniHelper.SwiperOnChange = (e) => {
    swiperCurrent.value = e.detail.current + 1
  }

  // 点击轮播图图片放大
  const clickSwiperImage = (item : string) => {
    uni.previewImage({
      current: item,
      urls: goodsData.value!.mainPictures,
      loop: true
    })
  }

  // 操作面板交互
  // 弹出层
  const popup = ref<{
    open : (type ?: UniHelper.UniPopupType) => void
    close : () => void
  }>()

  // 弹出层逻辑值
  const popupType = ref<'address' | 'services'>()
  const popupNum = (name : typeof popupType.value) => {
    popupType.value = name
    popup.value?.open('bottom')
  }

  // 是否展示SKU组件
  const isShowSKU = ref(false)
  // SKU组件数据
  const localdata = ref({} as SkuPopupLocaldata)

  // sku模式类型全部/购买/加购物车
  enum SkuMode {
    Both = 1,
    Cart = 2,
    Buy = 3
  }
  const mode = ref<SkuMode>()
  // 打开SKU组件并携带mode参数
  const isGoSku = (ev : SkuMode) => {
    isShowSKU.value = true
    mode.value = ev
  }

  // sku组件实例
  const SkuPropsRef = ref<SkuPopupInstance>()
  // 计算数据回显选择商品规格
  const selectArrRef = computed(() => {
    return SkuPropsRef.value?.selectArr?.join(' ').trim() || '请选择商品规格'
  })

  // 计算默认地址
  const selsectDefaultAddress = computed(() => {
    return addressListData.value.find(item => item.isDefault = 1)
  })
  // 计算收获地址
  const selectAddresss = computed(() => {
    return addressStore.addressProfile?.fullLocation || selsectDefaultAddress.value?.fullLocation || '请选择收获地址'
  })

  // 加入购物车
  const addCart = async (ev : SkuPopupEvent) => {
    // 判断是否处于登录状态
    if (!memberStore.profile?.token) {
      uni.showModal({
        content: "此操作需要登录",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/login/login"
            })
          }
        }
      })
      return
    }
    await addCartAPI({ skuId: ev._id, count: ev.buy_num })
    uni.showToast({
      title: "添加成功",
      icon: "success"
    })
    setTimeout(() => {
      isShowSKU.value = false
    }, 1000)
  }
  // 购买
  const addBuy = (ev : SkuPopupEvent) => {
    // 判断是否处于登录状态
    if (!memberStore.profile?.token) {
      uni.showModal({
        content: "此操作需要登录",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url: "/pages/login/login"
            })
          }
        }
      })
      return
    }
    uni.navigateTo({
      url: `/pagesOrder/create/create?skuid=${ev._id}&count=${ev.buy_num}`
    })
  }

  // 页面加载完
  onShow(async () => {
    //获取地址方法
    await getAddressList()
    // 使用获取商品详情方法
    await getGoods()
    // 修复如果用户在加载前点击商品规格让SKU值永远为true阻止sku显示的BUG
    isShowSKU.value = false
  })
</script>

<template>
  <!-- SKU组件 -->
  <vk-data-goods-sku-popup v-model="isShowSKU" :localdata="localdata" :mode="mode" add-cart-background-color="#FFA868"
    buyNowBackgroundColor="#27BA9B" @cart="addCart" @buy="addBuy" ref="SkuPropsRef"
    :actived-style="{color:'#27BA9B',borderColor:'#27BA9B',backgroundColor:'#E9F8F5'}"></vk-data-goods-sku-popup>
  <!-- 基本信息 -->
  <scroll-view scroll-y class="viewport">
    <!-- 基本信息 -->
    <view class="goods">
      <!-- 商品主图 -->
      <view class="preview">
        <swiper circular autoplay @change="onSwiperChange">
          <swiper-item v-for="item in goodsData?.mainPictures" :key="item">
            <image @tap="clickSwiperImage(item)" mode="aspectFill" :src="item" />
          </swiper-item>
        </swiper>
        <view class="indicator">
          <text class="current">{{swiperCurrent}}</text>
          <text class="split">/</text>
          <text class="total">{{goodsData?.mainPictures.length}}</text>
        </view>
      </view>

      <!-- 商品简介 -->
      <view class="meta">
        <view class="price">
          <text class="symbol">¥</text>
          <text class="number">{{goodsData?.price}}</text>
        </view>
        <view class="name ellipsis">{{goodsData?.name}} </view>
        <view class="desc"> {{goodsData?.desc}} </view>
      </view>

      <!-- 操作面板 -->
      <view class="action">
        <view class="item arrow" @tap="isGoSku(SkuMode.Both)">
          <text class="label">选择</text>
          <text class="text ellipsis"> {{selectArrRef}} </text>
        </view>
        <view @tap="popupNum('address')" class="item arrow">
          <text class="label">送至</text>
          <text class="text ellipsis"> {{selectAddresss}}</text>
        </view>
        <view @tap="popupNum('services')" class="item arrow">
          <text class="label">服务</text>
          <text class="text ellipsis"> 无忧退 快速退款 免费包邮 </text>
        </view>
      </view>
    </view>

    <!-- 商品详情 -->
    <view class="detail panel">
      <view class="title">
        <text>详情</text>
      </view>
      <view class="content">
        <view class="properties">
          <!-- 属性详情 -->
          <view class="item" v-for="item in goodsData?.details.properties" :key="item.name">
            <text class="label">{{item.name}}</text>
            <text class="value">{{item.value}}</text>
          </view>
        </view>
        <!-- 图片详情 -->
        <image v-for="item in goodsData?.details.pictures" :key="item" mode="widthFix" :src="item"></image>
      </view>
    </view>

    <!-- 同类推荐 -->
    <view class="similar panel">
      <view class="title">
        <text>同类推荐</text>
      </view>
      <view class="content">
        <navigator v-for="item in goodsData?.similarProducts" :key="item.id" class="goods" hover-class="none"
          :url="`/pages/goods/goods?id=${item.id}`">
          <image class="image" mode="aspectFill" :src="item.picture"></image>
          <view class="name ellipsis">{{item.name}}</view>
          <view class="price">
            <text class="symbol">¥</text>
            <text class="number">{{item.price}}</text>
          </view>
        </navigator>
      </view>
    </view>
  </scroll-view>

  <!-- 用户操作 -->
  <view class="toolbar" :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }">
    <view class="icons">
      <button class="icons-button"><text class="icon-heart"></text>收藏</button>
      <button class="icons-button" open-type="contact">
        <text class="icon-handset"></text>客服
      </button>
      <navigator class="icons-button" url="/pages/cart/cart2" open-type="navigate">
        <text class="icon-cart"></text>购物车
      </navigator>
    </view>
    <view class="buttons">
      <view class="addcart" @tap="isGoSku(SkuMode.Cart)"> 加入购物车 </view>
      <view class="buynow" @tap="isGoSku(SkuMode.Buy)"> 立即购买 </view>
    </view>
  </view>
  <!-- 弹出层组件 -->
  <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0" background-color="#fff">
    <ServicePanel v-if="popupType==='services'" @close="popup?.close()"></ServicePanel>
    <AddressPanel v-if="popupType==='address'" @close="popup?.close()" :address="addressListData"></AddressPanel>
  </uni-popup>
</template>

<style lang="scss">
  page {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .viewport {
    background-color: #f4f4f4;
  }

  .panel {
    margin-top: 20rpx;
    background-color: #fff;

    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 90rpx;
      line-height: 1;
      padding: 30rpx 60rpx 30rpx 6rpx;
      position: relative;

      text {
        padding-left: 10rpx;
        font-size: 28rpx;
        color: #333;
        font-weight: 600;
        border-left: 4rpx solid #27ba9b;
      }

      navigator {
        font-size: 24rpx;
        color: #666;
      }
    }
  }

  .arrow {
    &::after {
      position: absolute;
      top: 50%;
      right: 30rpx;
      content: '\e6c2';
      color: #ccc;
      font-family: 'erabbit' !important;
      font-size: 32rpx;
      transform: translateY(-50%);
    }
  }

  /* 商品信息 */
  .goods {
    background-color: #fff;

    .preview {
      height: 750rpx;
      position: relative;

      .image {
        width: 750rpx;
        height: 750rpx;
      }

      .indicator {
        height: 40rpx;
        padding: 0 24rpx;
        line-height: 40rpx;
        border-radius: 30rpx;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        bottom: 30rpx;
        right: 30rpx;

        .current {
          font-size: 26rpx;
        }

        .split {
          font-size: 24rpx;
          margin: 0 1rpx 0 2rpx;
        }

        .total {
          font-size: 24rpx;
        }
      }
    }

    .meta {
      position: relative;
      border-bottom: 1rpx solid #eaeaea;

      .price {
        height: 130rpx;
        padding: 25rpx 30rpx 0;
        color: #fff;
        font-size: 34rpx;
        box-sizing: border-box;
        background-color: #35c8a9;
      }

      .number {
        font-size: 56rpx;
      }

      .brand {
        width: 160rpx;
        height: 80rpx;
        overflow: hidden;
        position: absolute;
        top: 26rpx;
        right: 30rpx;
      }

      .name {
        max-height: 88rpx;
        line-height: 1.4;
        margin: 20rpx;
        font-size: 32rpx;
        color: #333;
      }

      .desc {
        line-height: 1;
        padding: 0 20rpx 30rpx;
        font-size: 24rpx;
        color: #cf4444;
      }
    }

    .action {
      padding-left: 20rpx;

      .item {
        height: 90rpx;
        padding-right: 60rpx;
        border-bottom: 1rpx solid #eaeaea;
        font-size: 26rpx;
        color: #333;
        position: relative;
        display: flex;
        align-items: center;

        &:last-child {
          border-bottom: 0 none;
        }
      }

      .label {
        width: 60rpx;
        color: #898b94;
        margin: 0 16rpx 0 10rpx;
      }

      .text {
        flex: 1;
        -webkit-line-clamp: 1;
      }
    }
  }

  /* 商品详情 */
  .detail {
    padding-left: 20rpx;

    .content {
      margin-left: -20rpx;

      .image {
        width: 100%;
      }
    }

    .properties {
      padding: 0 20rpx;
      margin-bottom: 30rpx;

      .item {
        display: flex;
        line-height: 2;
        padding: 10rpx;
        font-size: 26rpx;
        color: #333;
        border-bottom: 1rpx dashed #ccc;
      }

      .label {
        width: 200rpx;
      }

      .value {
        flex: 1;
      }
    }
  }

  /* 同类推荐 */
  .similar {
    .content {
      padding: 0 20rpx 200rpx;
      background-color: #f4f4f4;
      display: flex;
      flex-wrap: wrap;

      .goods {
        width: 340rpx;
        padding: 24rpx 20rpx 20rpx;
        margin: 20rpx 7rpx;
        border-radius: 10rpx;
        background-color: #fff;
      }

      .image {
        width: 300rpx;
        height: 260rpx;
      }

      .name {
        height: 80rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
      }

      .price {
        line-height: 1;
        font-size: 20rpx;
        color: #cf4444;
      }

      .number {
        font-size: 26rpx;
        margin-left: 2rpx;
      }
    }

    navigator {
      &:nth-child(even) {
        margin-right: 0;
      }
    }
  }

  /* 底部工具栏 */
  .toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
    height: 100rpx;
    padding: 0 20rpx var(--window-bottom);
    border-top: 1rpx solid #eaeaea;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: content-box;

    .buttons {
      display: flex;

      &>view {
        width: 220rpx;
        text-align: center;
        line-height: 72rpx;
        font-size: 26rpx;
        color: #fff;
        border-radius: 72rpx;
      }

      .addcart {
        background-color: #ffa868;
      }

      .buynow,
      .payment {
        background-color: #27ba9b;
        margin-left: 20rpx;
      }
    }

    .icons {
      padding-right: 10rpx;
      display: flex;
      align-items: center;
      flex: 1;

      .icons-button {
        flex: 1;
        text-align: center;
        line-height: 1.4;
        padding: 0;
        margin: 0;
        border-radius: 0;
        font-size: 20rpx;
        color: #333;
        background-color: #fff;

        &::after {
          border: none;
        }
      }

      text {
        display: block;
        font-size: 34rpx;
      }
    }
  }
</style>
